<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
<style>

	body { padding: 30px }
	form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
	
	.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
	.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
	.percent { position:absolute; display:inline-block; top:3px; left:48%; }
	
	.fileUpload {
		position: relative;
		overflow: hidden;
		margin: 10px;
	}
	
	.fileUpload input.upload {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
		font-size: 20px;
		cursor: pointer;
		opacity: 0;
		filter: alpha(opacity=0);
	}
	
</style>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.form.min.js"></script>

<script>
    $(function() {
        
        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');
        
        $("input:file").change(function( event ) {
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        });
        
        $('form').ajaxForm({
            beforeSend: function() {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';                
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success: function() {
                var percentVal = '100%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
        	complete: function(xhr) {
        		status.html(xhr.responseText);
        	}
        });   
        
        $("#uploadBtn").change(function( event ) {
            $("#uploadFile").val(this.value);
        });
            
    });
    
    
</script>
</head>
<body>

<body>
	<h1>File Upload Progress</h1>
	
    <form action="/opencms/esf/upload/addAjax.action" method="post" enctype="multipart/form-data">
		<span>
			<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
		</span>
    	<div class="fileUpload btn btn-primary">
    		<span>Upload</span>
        	<input id="uploadBtn" type="file" name="fileAllegato" class="upload" />
        </div>
        <div>
        	<input type="submit" value="Upload File to Server">
        </div>
    
    </form>
    
    <div class="progress">
        <div class="bar"></div>
        <div class="percent">0%</div>
    </div>
    
    <div id="status"></div>

</body>


</html>